<template>
    <div class="header">
        <div class="logo"></div>	
        <div class="user-info">
            <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                    <span v-bind:class="[{'color-red': !isDefault}, 'color-green']" class="el-icon-setting"></span>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="formal">切换正式系统数据库</el-dropdown-item>
                    <el-dropdown-item command="test">切换测试系统数据库</el-dropdown-item>
                    <el-dropdown-item command="loginout">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                name: 'linxin',
                isDefault: true
            }
        },
        mounted: function(){
            // 获得数据库状态
            this.getDBStutas();
        },
        methods:{
            getDBStutas: function(){
                this.$http.post('/api/db/status').then(response => {
                    let status = response.data.status;

                    this.isDefault = status === 'oadbMain' ? false : true; 

                }, response => {
                    console.log('Ajax can not get the data from the server!!!');
                });
            },
            changeDB: function(dbType){
                this.$http.post('/api/db/change', {change: dbType}, {emulateJSON: true}).then(reponse => {
                    this.$notify({
                        title: '成功',
                        message: '数据库切换成功！',
                        type: 'success'
                    });
                    console.log('Change OA database success!!!');
                    // 刷新页面
                    location.reload();
                }, reponse => {
                    this.$notify({
                        title: '失败',
                        message: '数据库切换失败！',
                        type: 'error'
                    });
                    console.log('Ajax can not get the data from the server!!!');
                });
            },
            handleCommand(command) {
                if (command == 'loginout'){
                    localStorage.removeItem('ms_username')
                    this.$router.push('/login');
                }
                if (command == 'formal'){
                    this.changeDB('formal');
                    this.isDefault = false;
                }
                if (command == 'test'){
                    this.changeDB('test');
                    this.isDefault = true;
                }
            }
        }
    }
</script>
<style scoped>

    .header{
        position: fixed;
        right: 20px;
        top: 50%;
        transform: translate(0, -50%);
        background-color: #fff;
    }

    .el-dropdown-menu__item{
        text-align: center;
    }
    .color-red{
        color: #FF0000 !important;
    }
    .color-green{
        color: #01FF00;
    }
</style>
